<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="/static/layui/css/layui.css">
</head>
<style>
.selectInput {
	width: 100px;
	height: 30px;
	margin: 3px;
}

table select {
	width: 250px;
	height: 250px;
}

#div2 {
	width: 150px;
	height: 150px;
}

.fontClass {
	font-size: 14px;
}
</style>
<script src="/static/layui/layui.js"></script>
<script type="text/javascript">
	//选择
	function a() {
		var selected1 = document.getElementById("selected1");
		var option1 = selected1.getElementsByTagName("option");
		var selected2 = document.getElementById("selected2");
		for (var i = 0; i < option1.length; i++) {
			if (option1[i].selected == true) {
				selected2.appendChild(option1[i]);

				i--;
			}
		}
	}
	//全部选择
	function b() {
		var selected1 = document.getElementById("selected1");
		var option1 = selected1.getElementsByTagName("option");
		var selected2 = document.getElementById("selected2");
		for (var i = 0; i < option1.length; i++) {
			selected2.appendChild(option1[i]);

			i--;
		}
	}
	//删除
	function c() {
		var selected2 = document.getElementById("selected2");
		var option2 = selected2.getElementsByTagName("option");
		var selected1 = document.getElementById("selected1");
		for (var i = 0; i < option2.length; i++) {
			if (option2[i].selected == true) {
				selected1.appendChild(option2[i]);
				i--;
			}
		}
	}
	//全部删除
	function d() {
		var selected2 = document.getElementById("selected2");
		var option2 = selected2.getElementsByTagName("option");
		var selected1 = document.getElementById("selected1");
		for (var i = 0; i < option2.length; i++) {
			selected1.appendChild(option2[i]);
			i--;
		}
	}
</script>

<div>
	<blockquote class="site-text layui-elem-quote" style="height:50px">
		<div class="layui-form-item wx-search" id="list_form">
			<div class="layui-input-inline">
				<select  id="goods_type" >
					<option value="-1">请选择物品类型</option>
					<c:forEach items="${goods_type}" var="v">
						<option value=">${v.value}">${v.label}</option>
					</c:forEach>
				</select>
			</div>
			<div class="layui-inline">
				<input type="text"  id="name" placeholder="请输入关键字" autocomplete="off" class="layui-input">
			</div>
			<button class="layui-btn btn-primary" id="search">搜索</button>
		</div>
	</blockquote>
	<div style="text-align: center;">
		<table style="width: 80%; margin: auto">
			<tr>
				<td>
					<div style="height: 30px">待选物品</div>
					<div id="div1">
						<select multiple="multiple" id="selected1" class="fontClass">
						</select>
					</div>
				</td>
				<td>
					<div id="div2">
						<input type="button" class="selectInput" value="选择" onclick="a()"><br> 
						<input type="button" class="selectInput" value="全部选择" onclick="b()"><br> 
						<input type="button" class="selectInput" value="删除" onclick="c()"><br> 
						<input type="button" class="selectInput" value="全部删除" onclick="d()">
					</div>
				</td>
				<td>
					<div style="height: 30px">已选物品</div>
					<div id="div3">
						<select multiple="multiple" id="selected2" class="fontClass"></select>
					</div>
				</td>
			</tr>
		</table>
	</div>
</div>
<script type="text/javascript">
    var xuanze;
    layui.use(['layer','jquery'], function () {
		    var layer = layui.layer;
		    var $ = layui.jquery;

		    // $.ajax({
			// 	url : '/buss/population/getpeoples',
			// 	type : 'post',
			// 	dataType : 'json',
			// 	success : function(data){
			// 		$("#selected2").html("");
			// 		var opHTML="";
            //         for(var i=0; i<data.length; i++){
            //              opHTML+= '<option value="'+ data[i].id +'">'+ data[i].name + '-' + data[i].tel + '-' + data[i].cardNo + '</option>';
            //         }
            //         $("#selected2").append(opHTML);
			// 	}
			// });

		    // 根据条件查询用户信息
		    $("#search").click(function(){
				var goods_type = $("#goods_type").val();
				var name = $("#name").val();
				if(goods_type=="-1"){
					layer.msg('请输入物品类型');
					return;
				}
				$.ajax({
					url : '${ctx}/bishe/bisheGoods/findList',
					type : 'post',
					dataType : 'json',
					data :{
						name : name,
                        goods_type : goods_type
					},
					success : function(data){
						$("#selected1").html("");
						for(var i=0; i<data.length; i++){
							var opHTML = '<option value="'+ data[i].id +'">'+ data[i].name + '</option>';
							$("#selected1").append(opHTML);
						}
						
					}
				});
			});

		     xuanze = function () {
                 var data ={};
                 $("#selected2 option").each(function () {
                     var val = $(this).val();
                     var text = $(this).text();
                     data[val]=text;
                 })
                    return data;
                }

		});

</script>
</html>